<template>
  <van-cell @click="show = true" />
  <van-popup v-model:show="show" position="bottom" :style="{ height: '90%' }" closeable>
    <div class="search-view">
      <van-search v-model="query" placeholder="鸡蛋" @search="onSearch" />
      <van-cell-group>
        <van-cell
          v-for="item in filteredItems"
          :key="item.name"
          :title="item.name"
          :label="item.calories + ' cals/份'"
          center
        >
          <template #icon>
            <van-image :src="item.image" width="40" height="40" />
          </template>
          <template #right-icon>
            <van-button
              type="primary"
              icon="plus"
              size="small"
              @click="router.push('/Addsomething')"
            />
            <!-- @click="addItem(item)" -->
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </van-popup>
</template>

<script setup>
const show = ref(false)
import router from '@/router'
import { ref, computed } from 'vue'
tto()
const query = ref('')
const items = ref([
  { name: '鸡蛋', calories: 1, image: 'path_to_image/egg.jpg' },
  { name: '炒鸡蛋', calories: 149, image: 'path_to_image/fried_egg.jpg' },
  { name: '煎蛋', calories: 154, image: 'path_to_image/pan_egg.jpg' },
  { name: '生蛋黄', calories: 48, image: 'path_to_image/raw_yolk.jpg' },
  { name: '鸡蛋松饼', calories: 256, image: 'path_to_image/pancake.jpg' },
  { name: '鸡蛋奶醨', calories: 256, image: 'path_to_image/custard.jpg' },
  { name: '鸡蛋松饼', calories: 256, image: 'path_to_image/pancake.jpg' },
  { name: '鸡蛋奶醨', calories: 256, image: 'path_to_image/custard.jpg' },
])

const filteredItems = computed(() => {
  return items.value.filter((item) => item.name.includes(query.value))
})

function onSearch(value) {
  console.log('搜索:', value)
}
// function addItem(item) {
//   console.log('添加:', item.name)
// }
function tto() {
  show.value = ref(true)
}
</script>

<style scoped lang="css">
.search-view {
  padding: 20px;
}

.van-cell {
  align-items: center;
}

.van-button {
  margin-left: 10px;
}
</style>
